CSS @media: Pola Media Query Tingkat Lanjut untuk Web yang Benar-Benar Responsif

Dalam lanskap pengembangan web modern yang dinamis, menciptakan pengalaman yang beradaptasi secara mulus di berbagai perangkat dan konteks pengguna bukan lagi sekadar praktik terbaik – ini adalah sebuah keharusan. Dari monitor desktop beresolusi tinggi hingga ponsel pintar yang ringkas, dari pengguna di pusat kota yang ramai dengan internet berkecepatan tinggi hingga mereka yang berada di daerah terpencil dengan bandwidth terbatas, dan dari individu yang lebih suka tema gelap hingga mereka yang memerlukan gerakan terbatas, web harus fleksibel. Di sinilah aturan CSS @media, landasan desain responsif, melampaui aplikasi dasarnya untuk menjadi alat yang kuat untuk adaptabilitas tingkat lanjut.

Meskipun banyak pengembang akrab dengan penggunaan @media untuk penyesuaian breakpoint sederhana, kekuatan sebenarnya terletak pada pola-pola canggihnya, operator logika, dan kemampuan untuk memanfaatkan preferensi pengguna dan lingkungan. Panduan komprehensif ini akan membawa Anda melampaui dasar-dasar, menjelajahi dunia rumit fitur media query tingkat lanjut yang memungkinkan Anda membuat aplikasi web yang benar-benar tangguh, inklusif, dan dapat diakses secara global.

Kita akan mendalami teknik yang memungkinkan desain Anda bereaksi tidak hanya terhadap ukuran layar, tetapi juga terhadap kemampuan perangkat, pengaturan aksesibilitas pengguna, dan bahkan lingkungan sekitar, memastikan pengalaman yang superior untuk setiap pengguna, di mana pun.

Fondasi: Tinjauan Singkat Sintaks Dasar @media

Sebelum kita menyelami pola-pola tingkat lanjut, mari kita tegaskan kembali landasannya. Media query dasar terdiri dari tipe media opsional (seperti screen, print, all) dan satu atau lebih fitur media (seperti min-width, orientation). Gaya di dalam blok @media hanya diterapkan jika kondisinya terpenuhi.

            /* Contoh dasar: Gaya hanya berlaku pada layar yang lebih lebar dari 768px */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Gaya hanya berlaku saat mencetak halaman */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Pemahaman mendasar ini sangat penting, karena pola-pola tingkat lanjut dibangun langsung di atasnya.

Melampaui Breakpoint: Memahami Fitur Media Query

Meskipun width dan height adalah fitur media yang paling sering digunakan, ada banyak fitur lain yang memungkinkan keputusan desain yang jauh lebih bernuansa. Memahami kemampuan ini adalah kunci untuk melampaui tata letak generik mobile/tablet/desktop.

Fitur Berbasis Viewport (Yang Biasa dan Lainnya)

Fitur-fitur ini berkaitan dengan dimensi dan karakteristik viewport browser, bukan layar perangkat fisik.

• width, height, min-width, max-width, min-height, max-height: Ini adalah tulang punggung desain responsif. Mereka memungkinkan Anda untuk mendefinisikan breakpoint berdasarkan area yang terlihat dari browser. Misalnya, Anda mungkin mengubah tata letak satu kolom menjadi tata letak multi-kolom ketika min-width mencapai nilai piksel tertentu.

            /* Terapkan tata letak dua kolom pada layar yang lebih lebar */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Fitur-fitur ini memungkinkan Anda menargetkan desain berdasarkan rasio lebar viewport terhadap tingginya. Ini sangat berguna untuk mengoptimalkan konten untuk berbagai bentuk layar, dari monitor ultra-lebar hingga ponsel pintar yang tinggi.

            /* Optimalkan gambar hero untuk layar ultra-lebar (misalnya, 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Fitur ini mendeteksi apakah viewport dalam mode portrait (tinggi lebih besar dari atau sama dengan lebar) atau landscape (lebar lebih besar dari tinggi). Ini sangat penting untuk pengalaman seluler dan tablet.

            /* Sesuaikan tata letak untuk orientasi lanskap pada tablet */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Fitur Berbasis Perangkat (Kurang Umum, Tetap Berguna)

Fitur-fitur ini berkaitan dengan karakteristik perangkat output fisik. Meskipun kueri berbasis viewport umumnya lebih disukai untuk tata letak konten, fitur berbasis perangkat memiliki ceruk spesifik.

• device-width, device-height (dan varian min/max-nya): Secara historis, ini digunakan untuk menargetkan resolusi perangkat tertentu. Namun, dengan ukuran jendela browser yang bervariasi di desktop dan tablet, serta kepadatan piksel yang berbeda, mengandalkan ini bisa tidak dapat diandalkan untuk tata letak umum. Dimensi viewport hampir selalu lebih tepat. Fitur ini mungkin masih dipertimbangkan dalam skenario yang sangat khusus, seperti aplikasi yang dirancang khusus untuk layar berukuran tetap seperti kios, tetapi ini jarang terjadi dalam pengembangan web pada umumnya.
• resolution: Fitur ini memungkinkan Anda menargetkan tampilan berdasarkan kepadatan pikselnya (DPI atau DPX – dots per pixel). Ini sangat penting untuk menyajikan gambar berkualitas tinggi ke layar "Retina" atau DPI tinggi tanpa mengirimkan file yang tidak perlu besar ke tampilan standar.

            /* Sajikan gambar latar belakang beresolusi lebih tinggi untuk layar DPI tinggi */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Perhatikan penggunaan dpi dan dppx untuk mencakup interpretasi browser yang berbeda dan membuat kode Anda tahan di masa depan. dppx (dots per pixel unit) umumnya lebih disukai karena lebih independen terhadap perangkat.

Operator Logika: Menggabungkan Kondisi dengan Presisi

Untuk membangun media query yang benar-benar canggih, Anda perlu menggabungkan beberapa kondisi menggunakan operator logika. Ini memungkinkan Anda untuk menentukan secara tepat kapan satu set gaya harus diterapkan.

`and` Operator: Semua Kondisi Harus Benar

Kata kunci and menggabungkan beberapa fitur media atau tipe media dan fitur. Semua kondisi yang ditentukan harus bernilai benar agar gaya dapat diterapkan.

            /* Terapkan gaya hanya pada layar dengan lebar antara 768px dan 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Ini sangat berguna untuk menargetkan rentang perangkat tertentu, seperti tablet dalam mode potret, atau untuk membuat tata letak yang sangat disesuaikan untuk dimensi layar yang sangat spesifik.

`or` Operator (`, ` dipisahkan koma): Kondisi Apa Pun Bisa Benar

Dalam aturan @media CSS, koma (`,`) bertindak sebagai logika ATAU (OR). Jika salah satu dari media query yang dipisahkan koma bernilai benar, gaya yang terkait akan diterapkan.

            /* Gaya berlaku jika layar lebih lebar dari 1200px ATAU jika perangkat dalam orientasi lanskap (terlepas dari lebarnya) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Gaya berlaku untuk media cetak ATAU untuk layar dengan resolusi minimum */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Untuk rendering cetak/resolusi tinggi yang lebih baik */
  }
}

            

              
                Copy
              
            
          

Fitur yang kuat ini memungkinkan Anda untuk mengelompokkan gaya yang harus diterapkan di bawah beberapa kondisi yang berbeda, menghasilkan stylesheet yang lebih ringkas dan mudah dibaca.

`not` Operator: Membalikkan Kondisi

Kata kunci not meniadakan seluruh media query, yang berarti gaya diterapkan jika kondisi yang ditentukan tidak terpenuhi.

            /* Terapkan gaya ke semua tipe media KECUALI cetak */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Terapkan gaya jika BUKAN layar dengan lebar minimum 768px (yaitu, untuk cetak atau layar yang lebih kecil dari 768px) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

Operator not bisa rumit dan harus digunakan dengan bijaksana. Pastikan Anda memahami cakupan apa yang sedang ditiadakan. Misalnya, @media not screen and (min-width: 768px) berarti "bukan layar DAN min-width 768px", yang secara logis setara dengan "jika bukan layar ATAU jika itu adalah layar DAN max-width kurang dari 768px". Seringkali lebih jelas menggunakan max-width daripada not min-width.

`only` Keyword: Memastikan Kompatibilitas Mundur (Konteks Historis)

Kata kunci only diperkenalkan untuk menyembunyikan stylesheet dari browser lama yang tidak sepenuhnya mendukung media query. Jika browser lama menemukan @media only screen, biasanya ia akan mengabaikan aturan tersebut karena tidak mengenali only sebagai tipe media yang valid. Browser modern mengurainya dengan benar. Mengingat dukungan browser yang luas untuk media query saat ini, only sebagian besar sudah tidak relevan untuk pengembangan baru tetapi mungkin terlihat di codebase lawas.

            /* Contoh: Gaya hanya diterapkan di layar, disembunyikan dari browser yang sangat tua */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Fitur Media Preferensi Pengguna: Merangkul Inklusivitas dan Aksesibilitas

Ini mungkin adalah fitur media query tingkat lanjut yang paling menarik dan berdampak, karena memberdayakan pengembang untuk merespons langsung preferensi tingkat sistem operasi atau browser pengguna, yang mengarah pada pengalaman yang jauh lebih mudah diakses dan ramah pengguna. Ini sangat penting untuk audiens global dengan kebutuhan dan lingkungan yang beragam.

prefers-color-scheme: Mode Terang dan Gelap

Fitur ini mendeteksi apakah pengguna telah meminta tema warna terang atau gelap untuk sistem operasi atau agen pengguna mereka. Menerapkan mode gelap secara signifikan meningkatkan aksesibilitas dan kenyamanan, terutama di lingkungan dengan cahaya redup atau bagi pengguna dengan sensitivitas cahaya.

• no-preference: Tidak ada preferensi yang ditunjukkan oleh pengguna.
• light: Pengguna lebih suka tema terang.
• dark: Pengguna lebih suka tema gelap.

            /* Tema default (terang) */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Untuk implementasi mode gelap yang lebih kuat, CSS Custom Properties (variabel) sangat berharga, memungkinkan Anda untuk mendefinisikan palet warna secara dinamis.

prefers-reduced-motion: Menghormati Kenyamanan Pengguna

Animasi dan transisi dapat meningkatkan pengalaman pengguna, tetapi bagi sebagian individu (misalnya, mereka yang memiliki gangguan vestibular, ADHD, atau hanya mereka yang merasa gerakan mengganggu), hal itu dapat menyebabkan ketidaknyamanan atau bahkan mual. Fitur ini mendeteksi apakah pengguna telah meminta animasi non-esensial yang minimal.

• no-preference: Tidak ada preferensi yang ditunjukkan.
• reduce: Pengguna lebih suka gerakan yang dikurangi.

            /* Animasi default */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Nonaktifkan gulir halus */
  }
}

            

              
                Copy
              
            
          

Merupakan praktik terbaik aksesibilitas yang kuat untuk selalu menyediakan alternatif gerakan yang dikurangi. Ini membantu dalam membangun web yang dapat digunakan dan nyaman bagi semua orang, terlepas dari kepekaan individu mereka.

prefers-contrast: Menyesuaikan Kontras Visual

Fitur ini mendeteksi apakah pengguna telah meminta tingkat kontras tertentu untuk sistem operasi mereka. Ini sangat bermanfaat bagi pengguna dengan penglihatan rendah atau kekurangan persepsi warna tertentu.

• no-preference: Tidak ada preferensi.
• less: Pengguna lebih suka kontras yang lebih sedikit.
• more: Pengguna lebih suka kontras yang lebih banyak.
• custom: Pengguna memiliki pengaturan kontras kustom (kurang umum).

            /* Gaya untuk kontras yang ditingkatkan */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Dengan menyediakan gaya untuk preferensi kontras yang berbeda, Anda secara aktif berkontribusi pada lingkungan digital yang lebih mudah diakses dan inklusif bagi pengguna secara global.

forced-colors: Menangani Palet Warna yang Dipaksakan Sistem

Ketika sistem operasi (seperti Windows High Contrast Mode) memaksakan palet warna tertentu pada aplikasi, terkadang hal itu dapat menimpa atau merusak desain web kustom. Fitur media forced-colors membantu pengembang beradaptasi dengan skenario ini, memungkinkan mereka menyediakan gaya yang berfungsi baik dalam batasan warna yang dipaksakan.

• active: Agen pengguna memiliki mode warna paksa yang aktif.
• none: Tidak ada mode warna paksa yang aktif.

            /* Penyesuaian untuk pengguna Mode Kontras Tinggi */
@media (forced-colors: active) {
  /* Pastikan elemen memiliki batas yang terlihat */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Hapus gambar latar belakang yang mungkin mengaburkan teks */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Buat agar terlihat */
  }
}

            

              
                Copy
              
            
          

Fitur ini sangat penting untuk memastikan kepatuhan terhadap standar aksesibilitas (seperti WCAG) dan memberikan pengalaman fungsional bagi pengguna yang bergantung pada penyesuaian tingkat sistem ini.

Fitur Media Lingkungan: Beradaptasi dengan Kemampuan Perangkat

Fitur media ini memungkinkan Anda menyesuaikan pengalaman berdasarkan bagaimana pengguna berinteraksi dengan perangkat mereka, seperti jenis perangkat penunjuk yang mereka gunakan atau kemampuan tampilan mereka.

hover dan any-hover: Membedakan Perangkat Penunjuk

Fitur-fitur ini membantu membedakan antara perangkat yang mendukung hovering (misalnya, desktop dengan mouse) dan perangkat yang utamanya menggunakan sentuhan (misalnya, ponsel pintar, tablet). Ini sangat penting untuk menghindari pola UX yang membuat frustrasi pada perangkat khusus sentuh.

• hover: Mengacu pada mekanisme input utama.
• any-hover: Mengacu pada setiap mekanisme input yang tersedia.
• Nilai: none (tidak ada dukungan hover), hover (ada dukungan hover).

            /* Tampilkan tooltip hanya pada perangkat dengan kemampuan hover */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Pada perangkat sentuh, tooltip mungkin dipicu oleh fokus atau tidak ditampilkan sama sekali */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Menggunakan any-hover seringkali lebih kuat, karena sebuah perangkat mungkin memiliki input sentuh dan mouse (misalnya, laptop 2-in-1). Jika any-hover adalah hover, maka setidaknya satu metode input mendukung hovering. Jika any-hover adalah none, maka tidak ada metode input yang mendukung hovering.

pointer dan any-pointer: Membedakan Akurasi Penunjuk

Fitur-fitur ini mendeteksi akurasi perangkat penunjuk utama (pointer) atau yang tersedia (any-pointer).

• none: Tidak ada perangkat penunjuk.
• coarse: Perangkat penunjuk yang tidak akurat (misalnya, jari di layar sentuh).
• fine: Perangkat penunjuk yang akurat (misalnya, mouse, stylus).

            /* Tingkatkan ukuran target ketuk untuk penunjuk kasar */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Kurangi padding untuk penunjuk halus */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Ini sangat penting untuk merancang antarmuka yang ramah sentuhan di mana target ketuk harus cukup besar untuk input jari, sambil tetap memungkinkan desain yang lebih ringkas ketika interaksi mouse yang presisi tersedia. Ini secara langsung memengaruhi kegunaan di berbagai spektrum perangkat dan kemampuan pengguna, terutama di pasar global di mana perangkat yang mengutamakan sentuhan sangat umum.

color-gamut: Melampaui sRGB

Fitur media color-gamut memungkinkan Anda mendeteksi apakah tampilan pengguna mendukung gamut warna yang lebih luas daripada sRGB standar (misalnya, P3 atau Rec. 2020). Ini memungkinkan desainer untuk menggunakan palet warna yang lebih kaya dan lebih hidup pada layar yang kompatibel.

• srgb: Gamut sRGB standar.
• p3: Tampilan mendukung gamut P3 (lebih luas dari sRGB).
• rec2020: Tampilan mendukung gamut Rec. 2020 (bahkan lebih luas).

            /* Gunakan warna P3 untuk elemen merek yang lebih hidup pada tampilan yang kompatibel */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* Merah yang cerah dalam P3 */
  }
}

            

              
                Copy
              
            
          

Meskipun masih dalam tahap awal, fitur ini menunjuk ke masa depan pengalaman web yang lebih menakjubkan secara visual dan akurat, terutama untuk industri kreatif atau pengiriman konten dengan fidelitas tinggi.

update: Menangani Tingkat Penyegaran Layar

Fitur ini menunjukkan seberapa cepat perangkat output dapat mengubah tampilan konten. Ini berguna untuk mengoptimalkan animasi dan konten dinamis untuk berbagai jenis layar.

• none: Tidak dapat diperbarui (misalnya, dokumen yang dicetak).
• slow: Memperbarui dengan lambat (misalnya, layar e-ink, beberapa perangkat lama).
• fast: Memperbarui dengan cepat (misalnya, monitor komputer biasa, ponsel pintar).

            /* Kurangi animasi kompleks pada tampilan yang lambat diperbarui */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Fitur ini membantu memastikan bahwa pengguna pada perangkat seperti e-reader, yang memprioritaskan masa pakai baterai dan tampilan statis, tidak menerima pengalaman yang terdegradasi atau tersendat karena animasi yang tidak sesuai.

Teknik Tingkat Lanjut dan Praktik Terbaik

Di luar fitur media individual, cara Anda menyusun CSS dan menggabungkan pola-pola ini dapat secara signifikan memengaruhi kemudahan pemeliharaan, kinerja, dan kualitas desain secara keseluruhan.

Mobile-First vs. Desktop-First: Sebuah Pilihan Strategis

Pilihan antara pendekatan mobile-first dan desktop-first adalah fundamental bagi strategi desain responsif.

• Mobile-First (min-width):
  • Mulai dengan merancang dan menata gaya untuk layar terkecil (seluler).
  • Gunakan media query min-width untuk secara progresif menambahkan gaya untuk layar yang lebih besar.
  • Manfaat:
    • Kinerja: Perangkat seluler seringkali memiliki daya pemrosesan yang lebih kecil dan koneksi internet yang lebih lambat. Pendekatan mobile-first memastikan bahwa hanya gaya yang diperlukan yang dimuat pada awalnya, menghasilkan waktu muat halaman yang lebih cepat. Ini sangat penting bagi pengguna di wilayah dengan infrastruktur internet yang sedang berkembang.
    • Peningkatan Progresif (Progressive Enhancement): Anda membangun dari pengalaman inti yang solid, menambahkan peningkatan untuk perangkat yang lebih mumpuni.
    • Fokus: Mendorong pengembang untuk memprioritaskan konten dan fungsionalitas esensial.
• Desktop-First (max-width):
  • Mulai dengan merancang untuk layar besar (desktop).
  • Gunakan media query max-width untuk menimpa gaya untuk layar yang lebih kecil.
  • Manfaat: Bisa lebih mudah bagi tim yang terbiasa dengan desain desktop tradisional, tetapi seringkali menghasilkan penimpaan yang lebih kompleks untuk seluler.

Untuk sebagian besar proyek modern, terutama yang menargetkan audiens global dengan kemampuan perangkat dan kondisi jaringan yang beragam, pendekatan mobile-first sangat direkomendasikan.

            /* Pendekatan mobile-first: Gaya layar kecil adalah default */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Gaya spesifik tablet */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Gaya spesifik desktop */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Menggunakan Properti Kustom CSS (Variabel) dengan Media Query

Menggabungkan Properti Kustom CSS (variabel) dengan media query adalah pengubah permainan untuk memelihara stylesheet responsif yang besar. Alih-alih mengulangi nilai, Anda mendefinisikannya sekali dan mengubah nilainya di dalam media query.

            /* Tentukan nilai default (seluler) */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Sesuaikan nilai untuk layar tablet */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Sesuaikan nilai untuk layar desktop */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Gunakan variabel di seluruh CSS Anda */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Terapkan gaya untuk layar antara 600px dan 900px */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Setara menggunakan sintaks tradisional */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Sembunyikan elemen non-esensial untuk cetak */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Pastikan teks berwarna hitam di atas putih agar mudah dibaca */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Tampilkan URL lengkap untuk tautan */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Atur pemisahan halaman dengan tepat */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first: Default ke menu tersembunyi, di luar kanvas */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tablet & Desktop: Tampilkan menu horizontal */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Penyesuaian lebih lanjut untuk layar yang sangat lebar atau rasio aspek tertentu */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Gambar latar belakang default (seluler/resolusi rendah) */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Gambar latar belakang resolusi sedang/desktop */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Gambar latar belakang spesifik DPI tinggi (Retina) */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Tipografi cair menggunakan calc() dan clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Sesuaikan grid untuk tablet lanskap, lebih memilih lebih banyak kolom */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Sesuaikan ketebalan font untuk mode kontras tinggi agar lebih mudah dibaca */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Variabel warna terpusat, dapat beradaptasi dengan mode terang/gelap */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Kurangi animasi jika diinginkan oleh pengguna */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Penyesuaian untuk mode warna paksa */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Pastikan batas tombol terlihat */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Contoh Container Query di masa depan */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy